<template>
	<div class="edit-popup">
		<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" :clickModalClose="true"
			@confirm="handleSubmit" @close="handleClose">
			<el-table :data="options.tableTile" size="large">
				<el-table-column label="序号" width="100" type="index"></el-table-column>
				<el-table-column label="列名" prop="name"></el-table-column>
				<el-table-column label="显示" width="100" fixed="right">
					<template #default="{ row }">
						<el-switch v-model="row.display" :active-value="1" :inactive-value="0" />
					</template>
				</el-table-column>
			</el-table>
		</popup>
	</div>
</template>
<script lang="ts" setup>
	import type {
		FormInstance
	} from 'element-plus'
	// import mtable from './table.vue'
	import Popup from '@/components/popup/index.vue'
	import {
		getOrderFlowFieldDisplay,
		setOrderFlowFieldDisplay
	} from '@/api/water/list'

	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef < FormInstance > ()
	const popupRef = shallowRef < InstanceType < typeof Popup >> ()
	const mode = ref('add')
	const popupTitle = computed(() => {
		return mode.value == 'edit' ? '编辑表单设置' : '编辑表单设置'
	})
	const formData = reactive({
		order_flow: ''
	})

	const options = reactive({
		tableTile: [] as any[],
	})

	const getOptions = () => {
		getOrderFlowFieldDisplay({
			page_type: 0
		}).then((data: any) => {
			let arry = JSON.parse(data.order_flow)
			options.tableTile = arry
		})
	}

	const handleSubmit = async () => {
		formData.order_flow = JSON.stringify(options.tableTile)
		await formRef.value?.validate()
		mode.value == 'edit' ? await setOrderFlowFieldDisplay(formData) : await setOrderFlowFieldDisplay(formData)
		popupRef.value?.close()
		emit('success')
	}

	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}

	const setFormData = (data: Record < any, any > ) => {
		for (const key in formData) {
			if (data[key] != null && data[key] != undefined) {
				//@ts-ignore
				formData[key] = data[key]
			}
		}
	}

	const handleClose = () => {
		emit('close')
	}

	getOptions()

	defineExpose({
		open,
		setFormData
	})
</script>
